import React from "react";
import {
    LaptopOutlined,
    NotificationOutlined,
    UserOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Breadcrumb, Layout, Menu, theme } from "antd";
import { useRouter } from "next/router";

const { Header, Content, Sider } = Layout;

const items1: MenuProps["items"] = [
    { key: "/manage/student", label: "学生管理" },
    { key: "/manage/class", label: "班级管理" },
    { key: "/manage/teacher", label: "老师管理" },
]

function Manage({children}:any) {
    const router = useRouter();
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    const handleClick = ({key}:any) => {
        console.log(key);
        router.push(key);
    }
    return (
        <Layout>
            <Header className="header">
                <h1 style={{ color: "white" }}>后台管理</h1>
            </Header>
            <Layout>
                <Sider width={200} style={{ background: colorBgContainer }}>
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={["1"]}
                        defaultOpenKeys={["sub1"]}
                        style={{ height: "100%", borderRight: 0 }}
                        items={items1}
                        onClick={handleClick}
                    />
                </Sider>
                <Layout style={{ padding: "0 24px 24px" }}>
                   
                    <Content
                        style={{
                            padding: 24,
                            margin: 0,
                            minHeight: 280,
                            background: colorBgContainer,
                        }}
                    >
                        {children}
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    );
}
export default Manage;
